const dialog = {
  dialogE: document.getElementById('dialog'),
  alertE: document.getElementById('alert'),
  loadingE: document.getElementById('loading'),
  formE: document.getElementById('form'),
  open() {
    dialog.dialogE.style.transform = ''
    return dialog
  },
  close() {
    dialog.dialogE.style.transform = 'translateY(100vh)'
    return dialog
  },
  alert(text) {
    dialog.alertE.innerText = text
    return dialog
  },
  loading(open) {
    dialog.loadingE.style.display = open ? '' : 'none'
    return dialog
  },
  form(items, callback) {
    dialog.loadingE.style.display = 'none'
    dialog.formE.style.display = ''
    for (let i = 0; i < items.length; i++) {
      const wrapper = document.createElement('div')
      if (items[i].startsWith('<')) {
        wrapper.innerHTML = items[i]
      } else {
        const itemE = document.createElement('button')
        itemE.innerText = items[i]
        const ind = i
        itemE.onclick = () => {
          const values = new Array(items.length)
          for (let i = 0; i < items.length; i++) {
            const inputE = dialog.formE.children[i].inputE
            values[i] = inputE ? inputE.value : ''
          }
          while (dialog.formE.childElementCount > 0) {
            dialog.formE.removeChild(dialog.formE.firstElementChild)
          }
          callback(ind, values)
        }
        wrapper.appendChild(itemE)
      }
      wrapper.inputE = wrapper.querySelector('input')
      dialog.formE.appendChild(wrapper)
    }
    return dialog
  }
}
